import {defineComponent , nextTick, onMounted, onUnmounted, PropType, provide, ref, } from "vue";
import {ElButton} from "element-plus"
import Style from "@/styles/components/popup.module.css"
import {cloneDeep} from "lodash";
import {Control} from "@/interfaces/components/Table";

/**
 * 弹出层组件
 * 其内部是一个空模板，内容由调用者决定
 */
export default defineComponent({
    name: "CdlPopup",
    props:{
        title: String,
        vNode: Object,
        controls: {
            type: Array as PropType<Control[]>,
            required: false
        },
        callFun: {
            type: Function as PropType<(val: any, mod: "add" | "update") => any>,
            required: false
        },
        mod: {
            type: String as PropType<"add" | "update">,
            required: false
        }
    },
    emits: ["destroyPopup"],
    setup(prop, {emit}){
        // const slot = {
        //     default: () => (<section>这是渲染的内容</section>),
        //     header: () => (<h2>这是标题</h2>)
        // }

        onMounted(()=>{
            nextTick(() => {
                const popupEl: HTMLDivElement = document.querySelector("#cdl_popup")!
                popupEl.classList.add(Style.on)
            })
        })

        const popupRef = ref()

        const Popup: any =  prop.vNode ? prop.vNode : <div>是不是没传递插槽内容？参数vNode可能不是一个虚拟DOM或组件</div>
        /**
         * 弹出层销毁事件
         */
        function popupClose(){
            const popupEl: HTMLDivElement = document.querySelector("#cdl_popup")!
            popupEl.classList.remove(Style.on)
            setTimeout(()=>{
                emit("destroyPopup")
            },300)
        }
        /**
         * 数据提交，向构造者递交数据
         */
        function submit(){
            popupRef.value.parentSubmit().then((res: any) =>{
                prop.callFun?.(prop.mod, cloneDeep(res))
                popupClose()
            })
        }
        /* eslint-disable */
        return () =>(
            <>
                <div class={Style.mask}></div>
                <div class={Style.suspended_window}>
                    <header class={Style.header}>
                        <h2>{prop.title}</h2>
                        <button class={Style.popup_close} onClick={popupClose}>
                            <i class={Style._i}><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
                        </button>
                    </header>
                    <div class={Style.content}>
                        {/*<popup v-slots={{default: () => prop.vNode}} ref={popupRef}></popup>*/}
                       <Popup ref={popupRef} onClose={popupClose}></Popup>
                    </div>
                    {
                        prop.controls || prop.callFun? <footer class={Style.footer}>
                            {
                                prop.controls?.map(item => <ElButton type={item.type}
                                                                     onClick={item.method}>{item.name}</ElButton>)
                            }
                            {
                                prop.callFun? <ElButton type="success" onClick={submit}>提交</ElButton> : null
                            }
                        </footer> : null
                    }
                </div>
            </>
        )
    }
})

const popup = defineComponent((_, {slots, expose}) =>{
    const mRef = ref()
    expose({
        mRef,
    })
    return () => (
        <>
            {slots.default? slots.default() : "是不是没传递插槽内容？参数{vNode}可能不是一个虚拟DOM或组件" }
        </>
    )
})
